<template>
  <!-- 技巧百科 -->
  <div>
    <van-nav-bar fixed title="技巧百科">
      <template #left>
        <van-icon name="arrow-left" @click="$router.go(-1)" />
      </template>
    </van-nav-bar>

    <div style="height: 46px"></div>
    <div v-if="data">
      <div
        class="baike"
        v-for="{ title, image, i } in data.data.courseGuide"
        :key="i"
      >
        <div class="baike-pic">
          <img :src="image" />
        </div>
        <div class="title">{{ title }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null,
    };
  },
  mounted() {
    this.axios
      .get(
        "https://api.hongbeibang.com/education/getNewbieGuide?_t=1666410894592&type=5&timestamp=1666410894591"
      )
      .then((res) => {
        console.log(res);
        // console.log(this.data);
        // console.log(res.data);
        this.data = res.data;
      });
  },
};
</script>

<style scoped>
:deep(.van-icon) {
  color: #333;
}
</style>

<style lang="scss" scoped>
.baike {
  display: flex;
  padding: 15px 10px;
  background-color: #fff;
  > .title {
    height: 70px;
    color: #555;
    font-size: 1.5rem;
    font-weight: bold;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
  }
}
.baike .baike-pic img {
  width: 40vw;
}
</style>
